<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>


     <div id="app">
       <!-- 在2.0中 自定义组件上面的事件都是自定义事件 除非加上了.native修饰符 那么就真的是对应的原生事件 -->
       <kfc v-model="a" @click.native="fn1"></kfc>
        <!-- <kfc :value="a" @input="()=> a = 内部emit触发的时候传递的参数"></kfc> -->
       
       <button @click="a=456">我是一个按钮</button>
       <h1>{{ a }}</h1>
     </div>

    <script>

          Vue.component('kfc',{
               props:['value'],
              template:`<h1>
                            我是kfc组件 {{value}} 
                          
                        </h1>`,
               methods:{
                 fn1(){
                   console.log('我是kfc里面的fn1函数')
                   this.$emit('input',88888)
                   this.$emit('click')
                 }
               }         
          })


          new Vue({
            el:"#app",
            data:{
              a:'13213'
            },
            methods:{
              fn1(ev){
                console.log(ev)
                console.log('我是根组件里面的fn1 ')
              }
            }
          })

        

    </script>
    
</body>
</html>